{%load static%}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>批卷详细页面</title>
  <!-- <link rel="stylesheet" type="text/css" href="{% static 'login/css/index.css' %}"/> -->
  <link href="{% static 'login/css/bootstrap.min.css' %}" rel="stylesheet">
  <style type="text/css">
      /*h5{
        margin: 0;
        padding: 0;
        }*/
      </style>
    </head>
    <body style="background: #2AABD2;">

      <div class="container">
        <!--页面标题部分-->
        <div class="row">
          <div class="jumbotron" style="background: #FFFFFF;opacity: 0.3;color: #000000;">
            <h1 class="text-center text-muted" style="font-family: '微软雅黑'"><span class="glyphicon glyphicon-globe"></span>&ensp;python+人工智能&ensp;<span class="glyphicon glyphicon-globe"></span><br/>1802C班2018年度7月水平测验</h1>
            {% if student_name %}
            <h2 class="text-center text-muted" style="font-family: '微软雅黑'">亲爱的{{student_name}}同学，请查看试卷</h2>
            {% endif %}
          </div>      
        </div>
        <!--/页面标题结束-->
        <!--提示部分-->
        <div class="row" style="margin-bottom: 10px;">
          <div class="col" style="text-align: center;">

            <!-- <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
              老师须知(开始批卷之前请点击这里)
            </button> -->
            <a href="{% url 'paper:student_index' %}"><button type="button" class="btn btn-primary btn-lg">点此返回主页面</button></a>

            <!-- <a href="{% url 'paper:batch' %}"><button type="button" class="btn btn-primary btn-lg">点此返回批卷页面</button></a> -->

            <a href="{% url 'login:login' %}"><button type="button" class="btn btn-primary btn-lg">点此返回登录页面</button></a>
            
          </div>
        </div>
        <!-- Modal -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">考生须知</h4>
              </div>
              <div class="modal-body">
               <h3><span class="glyphicon glyphicon-hand-right"></span>&ensp;1.本试卷共有五种题型，分别是:单选题({{单选题.0}}道,每题{{单选题.1}}分),<!-- 多选题({{多选题.0}}道,每题{{多选题.1}}分), -->填空题({{填空题.0}}道,每题{{填空题.1}}分),判断题({{判断题.0}}道,每题{{判断题.1}}分),英汉互译题({{英汉互译题.0}}道,每题{{英汉互译题.1}}分),简答题({{简答题.0}}道,每题{{简答题.1}}分)</h3>
               <h3><span class="glyphicon glyphicon-hand-right"></span>&ensp;2.页面底部交卷按钮点击之后不可撤销，成绩直接上传，请不要误点。</h3>

             </div>
             <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">确认</button>
            </div>
          </div>
        </div>
      </div>

      <div class="container">
        <div class="row">
          <!-- <div class="col-md-1"></div> -->
          <div class="col-md-12">
            <div class="tabbable" id="tabs-94781">
              <ul class="nav nav-tabs">
                {% for paper_obj,the_paper_dict in last_info_dict.items %}
                {% if forloop.counter == 1 %}
                <li class="active">
                  {% else %}
                  <li class="">
                    {% endif %}
                    <a href="#paper_obj{{forloop.counter}}" data-toggle="tab" contenteditable="false">{{paper_obj.paper_name}}<br />
                    总分：{{the_paper_dict.total_score}}分</a>

                  </li>
                  {% endfor %}
                </ul>
                <div class="tab-content">
                  {% for paper_obj,the_paper_dict in last_info_dict.items %}
                  {% if forloop.counter == 1 %}
                  <div class="tab-pane active" id="paper_obj{{forloop.counter}}">
                    {% else %}
                    <div class="tab-pane" id="paper_obj{{forloop.counter}}">
                      {% endif %}
                      <!-- {{paper_info}} -->

                      <form action="{% url 'paper:save_batch' %}" method="post" class="cc">
                        {% csrf_token %}

            <!-- 学生作答：{{question.1.choice_text}}<br>
            <h5 style="color: red;">正确答案：{{question.0.answer_set.all.0.answer_text}}</h5>
            此题得分：
            <h5 style="color: blue;">{{question.2}}</h5> -->

            
            <!--/提示部分-->
            {%if the_paper_dict.单选题%}
            <!--这里放置单选题面板-->
            <div class="panel panel-primary">
              <div class="panel-heading">
                <h3 class="panel-title"> 单选题(单题分值:{{the_paper_dict.单选题.1}})</h3>
              </div>
              <div class="panel-body">
                {% for question in the_paper_dict.单选题.2 %}
                <h3>{{forloop.counter}}、{{question.0.question_text}}</h3>

                <ol type="A">
                  {% for choice in question.0.choice_set.all %}
                  <div class="radio">

                    <li>
                      {{choice.choice_text}} 
                    </li>

                  </div>
                  {% endfor %}
                </ol>

                {% with m=question.1.choice_text n=question.0.answer_set.all.0.answer_text %}
                {% ifequal m n %}
                <h5 style="color: blue;">此题答对</h5>
                <h5 style="color: red;">学生作答：{{m}}</h5>
                <div class="input-group" style="color: red;">
                  <!-- 传递分数 -->
                  <label for="inputDan">此题得分：
                    <input type="text" name="{{question.0.id}}" id="inputDan" value="{{question.2}}" readonly="readonly" style="border: none;background: none;width: 10px;" required>分</label>
                  </div>
                  {% else %}
                  学生作答：{{m}}<br>
                  <h5 style="color: red;">正确答案：{{n}}</h5>
                  <div class="input-group" style="color: red;">
                    <!-- 传递分数 -->
                    <label for="inputDan">此题得分：
                      <input type="text" name="{{question.0.id}}" id="inputDan" value="0" readonly="readonly"  style="border: none;background: none;width: 10px;">分</label>
                    </div>
                    {% endifequal %}     
                    {% endwith %}
                    {% endfor %}
                  </div>    
                </div>
                <!--/单选题面板结束-->
                {%endif%}

                {% if the_paper_dict.多选题 %}
                <!--多选题面板-->
                <div class="panel panel-success">
                  <div class="panel-heading">
                    <h3 class="panel-title"> 多选题(单题分值:{{the_paper_dict.多选题.1}})</h3>
                  </div>

                  <div class="input-group" style="display: none;">
                    <!-- 传递分数 -->
                    <label for="inputScore">
                      <input type="text" name="{{question.id}}" id="inputScore" value="{{多选题.1}}"></label>
                    </div>

                    <div class="panel-body">
                      <h3>这里放置题干，直接更改文字即可</h3>
                      <div class="checkbox">
                        <label>
                          <input type="checkbox" value="">
                          A.这里放置选项文字，直接更改即可。
                        </label>
                      </div>
                      <div class="checkbox">
                        <label>
                          <input type="checkbox" value="">
                          B.这里放置选项文字，直接更改即可。
                        </label>
                      </div>  
                      <div class="checkbox">
                        <label>
                          <input type="checkbox" value="">
                          C.这里放置选项文字，直接更改即可。
                        </label>
                      </div>  
                      <div class="checkbox">
                        <label>
                          <input type="checkbox" value="">
                          D.这里放置选项文字，直接更改即可。
                        </label>
                      </div>  
                    </div>
                  </div>
                  {% endif %}
                  <!--/多选题面板结束-->
                  <!--填空题面板部分-->
                  {% if the_paper_dict.填空题 %}
                  <div class="panel panel-info">
                    <div class="panel-heading">
                      <h3 class="panel-title"> 填空题(单题分值:{{the_paper_dict.填空题.1}})</h3>
                    </div>
                    <div class="panel-body table-responsive">
                      <table class="table table-hover">
                        <tr>
                          <th>题干</th>
                          <th>答题</th>
                          <th>得分</th>
                        </tr>
                        {% for question in the_paper_dict.填空题.2 %}
                        <tr>
                          <td>{{forloop.counter}}、{{question.0.question_text}}</td>
                          <td>
                            <div class="input-group">
                              学生作答：{{question.1}}<br>
                              <h5 style="color: red;">正确答案：{{question.0.answer_set.all.0.answer_text}} </h5> 
                            </div>
                          </td>

                          <td> 
                            <div class="input-group">
                              <h5 style="color: red;">{{question.2}}分</h5>
                            </div>
                          </td>
                          {% endfor %}
                        </tr>
                      </table>
                    </div>
                  </div>
                  {% endif %}
                  <!--/填空题面板结束-->
                  <!--判断题面板开始-->
                  {% if the_paper_dict.判断题 %}
                  <div class="panel panel-warning">
                    <div class="panel-heading">
                      <h3 class="panel-title"> 判断题(单题分值:{{the_paper_dict.判断题.1}})</h3>
                    </div>
                    <div class="panel-body">
                      {% for question in the_paper_dict.判断题.2 %}
                      <div class="row">

                        <div class="col-sm-8">
                          <p>{{forloop.counter}}、{{question.0.question_text}}</p>         
                        </div>
                        <div class="col-sm-4">
                          {%ifequal question.0.answer_set.all.0.answer_text question.1%}

                          <span style="color: blue;">学生做答正确：{{question.1}}</span>
                          <div class="input-group pull-right" style="color: red;">

                            <!-- 传递分数 -->
                            <label for="inputPan">此题得分：
                              <input type="text" name="{{question.0.id}}" id="inputPan" value="{{the_paper_dict.判断题.1}}" readonly="readonly" style="border: none;background: none;width: 10px;">分</label>
                            </div>
                            {%else%}
                            <span>正确答案：{{question.0.answer_set.all.0}}
                            &nbsp&nbsp&nbsp学生做答：{{question.1}}</span>
                            <div class="input-group pull-right" style="color: red;">  
                              <!-- 传递分数 -->
                              <label for="inputPan">此题得分：
                                <input type="text" name="{{question.0.id}}" id="inputPan" value="0" readonly="readonly" style="border: none;background: none;width: 10px;">分</label>
                              </div>
                              {%endifequal%}

                            </div>
                          </div>
                          {% endfor %}    
                        </div>
                      </div>
                      {% endif %}
                      <!--/判断题面板结束-->
                      <!--英汉互译题面板-->
                      {% if the_paper_dict.英汉互译题 %}
                      <div class="panel panel-info">
                        <div class="panel-heading">
                          <h3 class="panel-title"> 英汉互译题(单题分值:{{the_paper_dict.英汉互译题.1}})</h3>
                        </div>
                        <div class="panel-body table-responsive">
                          <table class="table table-hover">
                            <tr>
                              <th>题干</th>
                              <th>答题</th>
                              <th>得分</th>
                            </tr>
                            {% for question in the_paper_dict.英汉互译题.2 %}
                            <tr>
                              <td><h4>{{forloop.counter}}、{{question.0.question_text}}</h4></td>
                              <td>
                                <div class="input-group">
                                  学生作答：{{question.1}}<br>
                                  <h5 style="color: red;">正确答案：{{question.0.answer_set.all.0.answer_text}} </h5> 
                                </div>
                              </td>

                              <td> 
                                <h5 style="color: red;">{{question.2}}分</h5>
                              </td>
                              {% endfor %}
                            </tr>
                          </table>
                        </div>
                      </div>
                      {% endif %}
                      <!--/英汉互译题面板结束-->

                      <!--简答题面板-->
                      {% if the_paper_dict.简答题 %}
                      <div class="panel panel-danger">
                        <div class="panel-heading">
                          <h3 class="panel-title"> 简答题(单题分值:{{the_paper_dict.简答题.1}})</h3>
                        </div>
                        <div class="panel-body">
                         {% for question in the_paper_dict.简答题.2 %}
                         <div class="row">
                          <div class="col-sm-10 col-sm-offset-1">
                            <h4>{{forloop.counter}}、{{question.0.question_text}}</h4>
                            <div class="col-sm-6">
                              <h4 style="color: red;text-decoration: underline;">学生作答：{{question.1}}</h4>
                            </div>
                            <div class="col-sm-6">
                              <div class="input-group pull-right">
                                <h5 style="color: red;">得分：{{question.2}}分</h5>
                              </div>
                            </div>
                          </div>
                        </div>
                        {% endfor %}
                      </div>
                      {% endif %}
                      <!--/简答题面板结束-->
                      <div class="col-sm-8">
                        <h3 class="the_all pull-right" style="color: red;"></h3><h3 class="pull-right">总分：{{the_paper_dict.total_score}}分</h3>
                        <input type="text" id="last_total" name="total_score" style="display: none;" value="">
                      </div>

                      <div class="row" style="margin-top:10px;">
                      <!-- <div class="col-sm-6 col-sm-offset-3">
                        <button type="submit" class="btn btn-danger btn-lg btn-block" style="outline: none;">确认全部完成？点击提交。</button>
                      </div> -->          
                    </div>

                  </div>
                </form>



              </div>
              {% endfor %}
            </div>

          </div>
        </div>
        <!-- <div class="col-md-1"></div> -->
      </div>
    </div>

    <!-- <script type="text/javascript">
       $(".btn1").trigger("click");
     </script> -->
     <script type="text/javascript" src="{% static 'login/js/jquery-3.3.1.min.js' %}"></script>
     <!-- Bootstrap部分： -->
     <script type="text/javascript" src="{% static 'login/js/bootstrap.min.js' %}"></script>
     <script type="text/javascript">
      $('.cc input').not('#last_total').change('input', function(){
        var total = 0;
        $("input").not('#last_total').each(function(){
          total+=(parseFloat($(this).val())?parseFloat($(this).val()):0);
        });
        /*total=total.toFixed(1);保留小数点后一位，因为js累加可能会出现小数点后出现多位的情况，可以通过它控制小数点位数*/
        $(".the_all").text(total);
        document.getElementById('last_total').value = total;
      });
    </script>
  </body>
  </html>